<template>
  <div style="height:100%;">
   <view-box ref="viewBox">
    <x-header class="header" :left-options="{backText: ''}">二维码库存</x-header>
    <div class="content">
      <div>
        <sticky scroll-box="vux_view_box_body" :offset="46">
        <tab :line-width=2 active-color='#fc378c' v-model="index">
          <tab-item class="vux-center" :selected="index === i" v-for="(item, i) in list2" @click="index=i" :key="i">{{item}}</tab-item>
        </tab>
        </sticky>
        <swiper v-model="index" height="350px" :show-dots="false">
          <swiper-item>
            <div class="tab-swiper vux-center" style="padding-top:10px;">
              <Chart width="100%" height="350px" :option="optionNewAge" theme='macarons' loading></Chart>
            </div>
          </swiper-item>
          <swiper-item>
            <div class="tab-swiper vux-center" style="padding-top:10px;">
              <Chart width="100%" height="350px" :option="optionFree" theme='macarons' loading></Chart>
            </div>
          </swiper-item>
        </swiper>
      </div>

      <ul>
        <li class="ub pad my-item">
          <div class="title uf-1">库存总量</div>
          <div class="value" style="margin-right:20px;">￥{{totalValue|money}}</div>
        </li>
        <li v-for="(x,i) of cities" :key="i" class="ub pad my-item" @click="handleToCity(x)">
          <i class="fa fa-diamond ub uc"></i>
          <div class="title uf-1">{{x.name}}</div>
          <div class="value">￥{{x.value|money}}</div>
          <div class="ub uc t-gray">
          <i class="fa fa-chevron-right"></i>
          </div>
        </li>
      </ul>
    </div>
   </view-box>
  </div>
</template>

<script>
import {
  XHeader,
  Tab,
  TabItem,
  Swiper,
  SwiperItem,
  Sticky,
  ViewBox
} from "vux";
import Chart from "@/components/Chart";

export default {
  data() {
    return {
      index: 0,
      list2: ["库存库龄", "无成本库存"],
      optionNewAge: {},
      optionFree: {},
      cities: [],
      totalValue: 0
    };
  },
  mounted() {
    this.$store.dispatch("store_index_new_age").then(resp => {
      this.optionNewAge = {
        title: {
          text: "",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        // roseType: 'radius',
        legend: {
          data: ["正常", "临界", "非正常"]
        },

        color: ["#5cb85c", "#f0ad4e", "#ac2925"],
        itemStyle: {
          normal: {
            shadowBlur: 30,
            shadowColor: "rgba(0, 0, 0, 0.4)"
          }
        },
        labelLine: {
          normal: {
            show: true
          }
        },
        series: [
          {
            name: "状态",
            type: "pie",
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            radius: ["25%", "65%"],
            data: resp.body.items
          }
        ]
      };
    });

    this.$store.dispatch("store_index_free").then(resp => {
      this.optionFree = {
        title: {
          text: "共计" + money(_.sum(resp.body.items, "value")),
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        itemStyle: {
          normal: {
            shadowBlur: 30,
            shadowColor: "rgba(0, 0, 0, 0.4)"
          }
        },
        series: [
          {
            name: "逻辑库",
            type: "pie",
            radius: ["25%", "65%"],
            data: resp.body.items
          }
        ]
      };
    });

    this.$store.dispatch("store_index").then(resp => {
      this.cities = resp.body.itemMap.cityValues;
      this.totalValue = resp.body.itemMap.totalValue;
    });
  },
  methods: {
    handleClickForAgePie(params) {},
    handleToCity(item) {
      this.$router.push({
        name: "StoreCityIndex",
        params: { comp_id: item.id }
      });
    }
  },
  components: {
    Chart,
    XHeader,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Sticky,
    ViewBox
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
li {
  .title {
    padding-left: 20px;
  }
  i {
    margin-left: 10px;
  }
}
</style>